<template>
  <div class="base">
    <div class="bg">
      <router-link to="/" class="title" style="font-size: 20px;font-weight: bold;">
        <i class="iconfont icon-007jiqiren"></i>RobotsField
      </router-link>
    </div>
    <div style="right">
      <div class="bg">
        <router-link to="/pk/" class="title" v-show="$store.state.User.isLogin">
          <i class="iconfont icon-qipaiPKduiju"></i>开始对局
        </router-link>
      </div>
      <div class="bg">
        <router-link to="/contestShow/" class="title">
          <i class="iconfont icon-duijujilu"></i>对局列表
        </router-link>
      </div>
      <div class="bg">
        <router-link to="/rankShow/" class="title">
          <i class="iconfont icon-paiming"></i>天梯排行
        </router-link>
      </div>
      <div class="bg" v-if="$store.state.User.isLogin">
        <router-link to="/infoShow/" class="title">
          <i class="iconfont icon-geren"></i>个人中心
        </router-link>
      </div>
      <div class="bg" v-show="!$store.state.User.isLogin">
        <router-link to="/login/" class="title">
          登录
        </router-link>
      </div>
      <div class="bg" v-show="!$store.state.User.isLogin">
        <router-link to="/register/" class="title">
          注册
        </router-link>
      </div>
    </div>
  </div>
  <!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router="true">
    <el-menu-item index="1" route="/">RobotsField</el-menu-item>
    <el-menu-item index="2" route="/pk/" v-if="$store.state.User.isLogin">对战</el-menu-item>
    <el-menu-item index="3" route="/contestShow/">对局列表</el-menu-item>
    <el-menu-item index="4" route="/rankShow/">天梯排行</el-menu-item>
    
    <el-menu-item index="6" id="info" route="/infoShow/" v-if="$store.state.User.isLogin">个人中心</el-menu-item>
    <el-menu-item index="6" id="info" route="/login/" v-show="!$store.state.User.isLogin">登录</el-menu-item>
    <el-menu-item index="7" id="register" route="/register/" v-show="!$store.state.User.isLogin">注册</el-menu-item>
  </el-menu> -->
</template>

<script>
import { useStore } from 'vuex';
export default {
  name: "navBarComponents",
  setup() {
    const store = useStore();


    return {
      store,
    }
  }
}
</script>
<style scoped>
.base {
  background-color: rgba(red, green, blue, 1);
  height: 10vh;
  padding: 20px 50px 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  color: white;
  cursor: pointer;
  text-decoration: none;
}

.bg {
  position: relative;
  /* 使伪元素可以绝对定位 */
  display: inline-block;
  /* 使容器宽度适应内容 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  font-size: 20px;
  color: white;
  cursor: pointer;
  margin-top: 30px;
  height: 50%;
  margin-left: 20px;
  /* 鼠标指针变为手型 */
}

.bg::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 3px;
  background-color: rgb(128, 200, 248);
  width: 0;
  /* 初始宽度为0 */
  transition: width 0.5s ease;
  /* 只对宽度进行过渡动画 */
  overflow: hidden;
}

/* 鼠标悬浮时提示线宽度增长 */
.bg:hover::after {
  width: 100%;
  /* 鼠标悬浮时宽度增长到100% */
}

.right {
  display: flex;
  align-items: center;
  width: 500px;
}

#info {
  position: absolute;
  right: 10%;
}

#register {
  position: absolute;
  right: 5.51%;
}

a:visited {
  color: white;
}

a:hover {
  text-decoration: none;
  color: white;
}

a:active {
  text-decoration: none;
  color: white;
}

a:focus {
  outline: none;
}
</style>